<template>
  <el-dialog title="车辆下线" :visible="visible" width="900px" append-to-body @close="close">
    <el-form ref="form" :model="offlineForm" :rules="rules" label-width="120px">
      <el-row>
        <el-form-item label="下线车辆" prop="carNo">
          <el-input :style="{width: '80%'}" disabled v-model="offlineForm.carNo"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="下线时间" prop="createTime" required>
          <el-date-picker type="datetime" v-model="offlineForm.createTime" :picker-options="pickerOptions"
                          format="yyyy-MM-dd HH:mm"  value-format="yyyy-MM-dd HH:mm" :style="{width: '80%'}" placeholder="请选择下线时间" clearable @onClick="changeTime">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="updateTime">
          <template slot="label">
            <el-tooltip placement="right-start">
              <div slot="content" style="font-size: 14px">
                若配置预计上线时间，系统将自动<br/>
                上线车辆:若车辆未完成维保,系统<br/>
                自动上线车辆时将自动完成维保
              </div>
              <el-button type="text" style="font-weight:700;color: #606266">预计上线时间<i class="el-icon-warning-outline"></i></el-button>
            </el-tooltip>
          </template>
          <el-date-picker type="datetime" v-model="offlineForm.updateTime"  :picker-options="pickerOptions2"
                          format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :style="{width: '80%'}" placeholder="请选择预计上线时间" clearable>
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="下线原因" prop="reasonForOffline" required>
          <el-radio-group v-model="offlineForm.reasonForOffline">
            <el-radio :value="1" :label="1">保养</el-radio>
            <el-radio :value="2" :label="2">维修</el-radio>
            <el-radio :value="3" :label="3">处置</el-radio>
            <el-radio :value="4" :label="4">其他</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-form-item label="说明" prop="remark">
        <el-input type="textarea" :rows="2" maxlength="300" show-word-limit placeholder="请输入下线原因"
                  v-model="offlineForm.remark">
        </el-input>
      </el-form-item>
      <el-form-item v-if="showMsg">
        <div style="color: red">{{msg}}</div>
      </el-form-item>
<!--      <el-form-item  label="同步下线" prop="sourceCodes">-->
<!--        <el-checkbox-group v-model="offlineForm.sourceCodes">-->
<!--          <el-checkbox v-for="(item, index) in originList" :key="index" :label="item.dictValue" :name="item.dictValue">{{item.dictLabel }}</el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary"  size="medium" :loading="loading" @click="confim">确 定</el-button>
      <el-button @click="close"  size="medium">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addOnoff,offlinePreInspection} from "@/api/car/car_basic";

import moment from "moment"
export default {
  props: {},
  data() {
    // 这里存放数据
    return {
      visible:false,
      loading:false,
      originList:[],

      showMsg:false,
      msg:"",


      offlineForm: {
        carId: null,
        type: 1,
        createTime: '',
        updateTime: null,
        reasonForOffline: 1,
        remark: "",
        sourceCodes:[],
        carNo:''
      },
      pickerOptions: {
        disabledDate(time) {
          return  time.getTime() < Date.now()-8.64e7// 当前时间的前一天
        },
        selectableRange: ''
      },
      pickerOptions2: {
        disabledDate(time) {
         return   time.getTime() < Date.now() - 8.64e7 // 当前时间的前一天
        },
        selectableRange: ""
      },
      // 表单校验
      rules: {
        createTime: [
          {
            required: true,
            message: '请选择下线时间',
            trigger: 'change',
          },
        ],
        reasonForOffline: [
          {
            required: true,
            message: '请选择下线原因',
            trigger: 'change',
          },
        ]
      },
    }
  },
  watch: {
    // 'offlineForm.createTime'(selectTime) {
    //   console.log('时间是:', selectTime);
    //   const date = moment(selectTime).valueOf()
    //   const today = moment().valueOf()
    //   if (date == today) {
    //     console.log('是今日')
    //     // 当选择的日期就是当天的时候，这个时候就要限制时间应当小于此时此刻的时分秒
    //     // this.pickerOptions.selectableRange = `${moment().format('HH:mm')} - '23:59'`
    //     // console.log('saaaa', this.pickerOptions.selectableRange);
    //   } else {
    //     // 当选择的日期大于当天的时候，这时需要把时分秒的限制放开，否则不能选择
    //     this.pickerOptions.selectableRange = '00:00 - 23:59'
    //   }
    // }
  },

  // 方法集合
  methods: {

    changeTime(e){
          console.log('是今日',e)
      //   const date = moment(selectTime).valueOf()
      //   const today = moment().valueOf()
      //   if (date == today) {
      //     console.log('是今日')
      //     // 当选择的日期就是当天的时候，这个时候就要限制时间应当小于此时此刻的时分秒
      //     // this.pickerOptions.selectableRange = `${moment().format('HH:mm')} - '23:59'`
      //     // console.log('saaaa', this.pickerOptions.selectableRange);
      //   } else {
      //     // 当选择的日期大于当天的时候，这时需要把时分秒的限制放开，否则不能选择
      //     this.pickerOptions.selectableRange = '00:00 - 23:59'
      //   }
    },

    getOriginList() {
      this.getDicts('ota_order_resource').then(res => {
        this.originList = res.data
      })
    },
    show(carOffInfo){
      this.visible = true;
      this.$nextTick(()=>{
        this.$refs.form.resetFields();
        this.offlineForm.carId = carOffInfo.carId;
        this.offlineForm.createTime = carOffInfo.defaultCarOffTime || '';
        this.offlineForm.carNo = carOffInfo.carNo;
        console.log('offlineForm', this.offlineForm)
        this.offlineForm.sourceCodes = [];
      })

    },
    confim(){
      this.showMsg=false;
      this.loading=true;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.offlineForm.updateTime && new Date(this.offlineForm.updateTime).getTime() <= new Date(this.offlineForm.createTime)) {
            this.$modal.msgError('预计上线时间不能早于或等于下线时间')
          } else {
            offlinePreInspection(this.offlineForm).then(res => {
               switch (res.data.code){
                 case 0:
                   this.doAddOnoff();
                   break;
                 case 1:
                 case 2:
                 case 3:
                 case 4:
                   this.showMsg=true;
                   this.loading=false;
                   this.msg = res.data.msg;
                   break;
                 case 5:
                   this.loading=false;
                   this.$confirm(res.data.msg, '提示', {
                     confirmButtonText: '确认',
                     cancelButtonText: '取消',
                     type: 'warning'
                   }).then(() => {
                       this.doAddOnoff();
                   })
                   break;

               }
            })
          }
        }
      })
    },
    doAddOnoff(){

      this.loading=true;
      addOnoff(this.offlineForm).then(() => {
        this.visible = false;
        this.$emit('success');
        this.$modal.msgSuccess('操作成功')
      }).finally(err=>{

        this.loading=false;
      })
    },
    close(){
      this.visible = false;
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.getOriginList();
  },

}
</script>

<style lang="scss" scoped>
</style>
